<!--
  * 商品明细
  *
-->
<template>
  <a-table :dataSource="tableData" :loading="tableLoading" :columns="columns" :pagination="false" rowKey="id" size="small" bordered :scroll="{ x: 'max-content' }">
    <template #bodyCell="{ column, record, text }">
      <template v-if="column.dataIndex === 'goods_name'">
        <CopyText :text="text">
          {{ text }}
        </CopyText>
      </template>
    </template>
  </a-table>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { taskApi } from '@/api/business/logistics/delivery-api'
import { useEnums } from '@/hooks/plugins/useEnums'
import { useQuery } from '@/hooks/web/use-query-hook'
const { getDescByValue } = useEnums()
const props = defineProps({
  rowId: {
    type: Number,
    default: null
  }
})
const tagType = ref({
  1: 'error',
  2: 'warning',
  3: 'processing',
  4: 'success'
})
const columns = reactive([
  {
    title: '商品名称',
    dataIndex: 'goods_name'
  },
  {
    title: '规格',
    dataIndex: 'spec_name'
  },
  {
    title: '单位',
    dataIndex: 'unit_name'
  },
  {
    title: '数量',
    dataIndex: 'goods_num_str'
  },
  {
    title: '体积',
    dataIndex: 'total_volume'
  },
  {
    title: '重量',
    dataIndex: 'total_weight'
  }
])

// ---------------------------- 查询数据表单和方法 ----------------------------
const { tableData, tableLoading, queryData } = useQuery({
  fetchDataApi: async () => {
    const res = await taskApi.detailLoadGoods({ id: props.rowId })
    return {
      list: res.data,
      total: res.data.length
    }
  },
  queryFormFilter: {},
  queryFormOp: {}
})

watch(() => props.rowId, queryData, { immediate: true })
</script>
